import React, {ReactNode} from "react";
import {Image, StyleSheet} from "react-native";
import {Resource} from "../resource/Resource";
import SessionPage from "../page/SessionPage";
import FriendPage from "../page/FriendPage";
import RoomPage from "../page/RoomPage";
import AboutPage from "../page/AboutPage";
import SystemMessagePage from "../page/SystemMessagePage";
import TabNavigator from "./tabbar/TabNavigator";
import TabNavigatorItem from "./tabbar/TabNavigatorItem";
import {ScreenDimensions} from "../libs/utils/ScreenDimensions";


export type TabNavigatorProps = {
    selectedTab: string;
};

export type TabNavigatorStates =  {
    selectedTab: string;
};

export default class TabNavigatorComponent extends React.Component<TabNavigatorProps, TabNavigatorStates> {
    constructor(props: any) {
        super(props);
        this.state = {
            selectedTab:this.props.selectedTab
        }
    }

    render(): ReactNode {
        return (
            <TabNavigator style={{padding: 0}}>
                <TabNavigatorItem
                    selected={this.state.selectedTab === 'session'}
                    title="最近会话"
                    selectedTitleStyle={ClientAppStyle.selectedTitleStyle}
                    renderIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                             source={Resource.comment}/>}
                    renderSelectedIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                                     source={Resource.comment_selected}/>}
                    badgeText="1"
                    onPress={() => this.setState({selectedTab: 'session'})}>
                    {SessionPage}
                </TabNavigatorItem>

                <TabNavigatorItem
                    style={{}}
                    selected={this.state.selectedTab === 'friend'}
                    title="好友"
                    selectedTitleStyle={ClientAppStyle.selectedTitleStyle}
                    renderIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                             source={Resource.user}/>}
                    renderSelectedIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                                     source={Resource.user_selected}/>}
                    onPress={() => this.setState({selectedTab: 'friend'})}>
                    {FriendPage}
                </TabNavigatorItem>

                <TabNavigatorItem
                    style={{}}
                    selected={this.state.selectedTab === 'room'}
                    title="讨论组"
                    selectedTitleStyle={ClientAppStyle.selectedTitleStyle}
                    renderIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                             source={Resource.group}/>}
                    renderSelectedIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                                     source={Resource.group_selected}/>}
                    onPress={() => this.setState({selectedTab: 'room'})}>
                    {RoomPage}
                </TabNavigatorItem>

                <TabNavigatorItem
                    style={{}}
                    selected={this.state.selectedTab === 'about'}
                    title="关于"
                    selectedTitleStyle={ClientAppStyle.selectedTitleStyle}
                    renderIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                             source={Resource.cog}/>}
                    renderSelectedIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                                     source={Resource.cog_selected}/>}
                    onPress={() => this.setState({selectedTab: 'about'})}>
                    {AboutPage}
                </TabNavigatorItem>

                <TabNavigatorItem
                    style={{}}
                    selected={this.state.selectedTab === 'systemMessage'}
                    title="系统消息"
                    selectedTitleStyle={ClientAppStyle.selectedTitleStyle}
                    renderIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                             source={Resource.cog}/>}
                    renderSelectedIcon={() => <Image style={ClientAppStyle.tabItemStyle}
                                                     source={Resource.cog_selected}/>}
                    onPress={() => this.setState({selectedTab: 'systemMessage'})}>
                    {SystemMessagePage}
                </TabNavigatorItem>


                {/*<TabNavigatorItem*/}
                    {/*style={{}}*/}
                    {/*selected={this.state.selectedTab === 'component'}*/}
                    {/*title="组件"*/}
                    {/*selectedTitleStyle={ClientAppStyle.selectedTitleStyle}*/}
                    {/*renderIcon={() => <Image style={ClientAppStyle.tabItemStyle}*/}
                                             {/*source={Resource.cog}/>}*/}
                    {/*renderSelectedIcon={() => <Image style={ClientAppStyle.tabItemStyle}*/}
                                                     {/*source={Resource.cog_selected}/>}*/}
                    {/*onPress={() => this.setState({selectedTab: 'component'})}>*/}
                    {/*{ComponentPage}*/}
                {/*</TabNavigatorItem>*/}
            </TabNavigator>
        )
    }
}

const ClientAppStyle = StyleSheet.create({
    tabItemStyle: {width: 18, height: 18},
    selectedTitleStyle:{color:ScreenDimensions.themeColor}
});

